<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{padding: 0;margin: 0; list-style: none; cursor: pointer;}
body {background-color: #9e9e9e; font-size: 14px;}
.box{background-color: #f1f1f1; float: left; border: 2px solid #666;}
#left{float: left;}
#left li{width: 100px; height: 100px; border-bottom: 1px solid #fff;border-right: 1px solid #fff; line-height: 100px; text-align: center;margin-right: 4px;}
#left li:last-child{border-bottom: none !important;}			/* ！格式 ！*/
#right{float: left;}
#right img{width: 602px;height: 350px;vertical-align: top;}
#right li{float: left;width: 200px; height: 52px; border-top: 1px solid #fff;border-right: 1px solid #fff; line-height: 50px; text-align: center;}
#right li:last-child{border-right: none !important;}
.active1{background-color: #fff;}
.active2{background-color: #89ffdd;}
</style>
<script type="text/javascript">
window.onload = function (){
	var arr =[
		['1-1.jpg','1-2.jpg','1-3.jpg'],
		['2-1.jpg','2-2.jpg','2-3.jpg'],
		['3-1.jpg','3-2.jpg','3-3.jpg'],
		['4-1.jpg','4-2.jpg','4-3.jpg']
	];
	var num = 0;
	var a = 0;

	for (var i = 0; i < $('left','li').length; i++) {
		$('left','li')[i].index = i;
		$('left','li')[i].onclick = function (){
			for (var i = 0; i < $('left','li').length; i++) {
				$('left','li')[i].className = '';
			};

			for (var i = 0; i < $('right','li').length; i++) {
				$('right','li')[i].className = '';
			};

			$('left','li')[this.index].className = 'active1';
			$('right','img')[0].src = arr[this.index][0];
			$('right','li')[0].className = 'active2';
			return a = this.index;		//a只有在有点击左边时才有给出值，也就是说如果一开始没有先点击左边，下面右边的点击事件就不会切换图,所以一开始我们就要给a赋值，让它可以先切换第一组图片
		}
	};

	for (var i = 0; i < $('right','li').length; i++) {
		$('right','li')[i].index = i;
		$('right','li')[i].onclick = function (){
			for (var i = 0; i < $('right','li').length; i++) {
				$('right','li')[i].className = '';
			};
			this.className = 'active2';
			$('right','img')[0].src = arr[a][this.index];	//这里需要用到a
		}
	};

// 初始化
	$('left','li')[num].className = 'active1';
	$('right','li')[num].className = 'active2';
	$('right','img')[num].src = arr[num][num];

}
//华丽的分割线
function $(id,tag){
	if (tag) {
		return document.getElementById(id).getElementsByTagName(tag);
	}else {
		return document.getElementById(id);
	}
}
</script>
</head>
<body>
	<div class="box">
		<ul id="left">
			<li>最热团购</li>
			<li>商城特惠</li>
			<li>名品推荐</li>
			<li>缤纷活动</li>
		</ul>
		<div id="right">
			<img>
			<ul>
				<li>最热团购1</li>
				<li>最热团购2</li>
				<li>最热团购3</li>
			</ul>
		</div>
	</div>
</body>
</html>